import React from "react";
import "./index.css";

/**
 * 需求：
 *    1. 输入完内容之后，让滚动条能够置底
 *        操作 scrollTop
 *        涉及到： setState 是异步的
 *              1. 将设置 scrollTop 的代码放在 setState 第二个参数 （推荐）
 *              2. 将设置 scrollTop 的代码放在 componentDidUpdate 钩子函数中
 *
 *    2. 操作头部添加，然后滚动条要保持在原地,(滚动条已经动过的操作)
 *       操作 scrollTop
 *       涉及到： 原生js的 scrolltHeight + scrollTop
 *
 *       1. 头部添加数据之后，scrollTop 的值有没有变动？   没有变动，我们需要操作它变动。
 *          知道一个 li 的高度的情况下，发送了消息之后，让 scrollTop += li 的高度
 *
 *       2. 如果无法确认 li 的高度呢？这时就需要获取到增加的高度
 *          用最新的容器 scrollHeight - 旧的容器的 scrollHeight
 *          如何获取到旧的容器的 scrollHeight 呢？
 */

class App extends React.Component {
  state = {
    list: Array(12).fill("1"), // 存放消息列表
  };

  add = () => {
    // 1. 获取 input 框的输入值
    const value = this.refs.myInput.value.trim();
    // 2. 判断
    if (!value) return;
    // 3. 追加到 list
    this.setState(
      (prevState) => {
        return {
          list: [...prevState.list, value],
        };
      },
      () => {
        // 真实DOM更新之后，触发
      }
    );
    // PS: 将 myMain 的 scrollTop 值修改
    //    有bug，原因是啥，数据的变化是异步的，咱们不能立刻获取到真实的DOM
    // console.log(this.refs.myMain.scrollHeight);
    // this.refs.myMain.scrollTop = this.refs.myMain.scrollHeight;
    // 4. 清空 input
    this.refs.myInput.value = "";
    // 5. 获取它的焦点
    this.refs.myInput.focus();
  };

  addUnshift = () => {
    // 1. 获取 input 框的输入值
    const value = this.refs.myInput.value.trim();
    // 2. 判断
    if (!value) return;
    // 3. 追加到 list
    this.setState((prevState) => {
      return {
        list: [value, ...prevState.list],
      };
    });
    this.refs.myInput.value = "";
    // 5. 获取它的焦点
    this.refs.myInput.focus();
  };

  handleKeyUp = (event) => {
    console.log(event.keyCode);
    if (event.keyCode === 13) {
      // 调用 addUnshift
      this.addUnshift();
    }
  };

  componentDidMount() {
    this.refs.myInput.focus();
  }

  getSnapshotBeforeUpdate() {
    // 获取 myMain 的 scrollHeight 值
    return this.refs.myMain.scrollHeight;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const newValue = this.refs.myMain.scrollHeight;
    console.log("old", snapshot);
    console.log("new", this.refs.myMain.scrollHeight);

    this.refs.myMain.scrollTop += newValue - snapshot;
  }

  // componentDidUpdate() {
  //   console.log(this.refs.myMain.scrollHeight);
  //   this.refs.myMain.scrollTop = this.refs.myMain.scrollHeight;
  // }

  render() {
    const { list } = this.state;
    return (
      <div className="app">
        <ul className="main" ref="myMain">
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <div className="footer">
          <input type="text" ref="myInput" onKeyUp={this.handleKeyUp} />
          <button onClick={this.addUnshift}>发送</button>
        </div>
      </div>
    );
  }
}

export default App;
